<!-- jquery 事件绑定 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.min.js"></script>
  </head>
  <body>
    账号：<input class="zh" type="text" />
    <br />
    密码：<input class="mm" type="password" />
    <br />
    <button class="tj">提交</button>
    <script>
      // 输入账号密码后，点击提交按钮，打印用户输入的账号密码在控制台上
      $(function () {
        console.log(1)
        // const $tjBtn = $('.tj')
        // 这个 on 方法，是咱们最通用的绑定事件的方法，也就是说，你只用记这一个就 ok 了
        // $tjBtn.on('click', function () {
        //   console.log('点击事件处理函数执行了....')
        // })
        // 还可以直接将事件类型作为函数直接调用，也可以绑定该事件
        // $tjBtn.click(function () {
        //   console.log('点击事件处理函数执行了....')
        // })
        // 目前来看，这两种方式，同学们可能觉得第二种更方便，直接用事件类型做为函数调用即可
        // 但是这种方式，不支持事件委托（事件委派|事件代理）
      })
    </script>

    <br />

    <div id="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <p>4-1</p>
      <p>4-2</p>
      <div>5</div>
    </div>

    <script>
      $(function () {
        // 事件三要素：事件源、事件类型、事件处理函数
        // 需求：只有点击了 #box div 下的 p 标签 才触发该事件
        // 如果 on 方法的第二个参数不是函数，那 jquery 认为不是事件处理函数，是代理的后代选择器
        $('#box').on('click', 'p', function () {
          // 这个 e     是事件对象
          // e.target   事件目标（事件流的三个阶段：捕获、目标、冒泡）
          // console.log(this, e.target)
          // if (e.target.tagName === 'P') {
          //   // 说明点的是 p
          // }
          console.log('触发了11111。。。', this) // 如果做了事件
        })

        // $('#box').on('click', 'p', function () {
        //   console.log('触发了22222。。。')
        // })

        // 这里是将所有的小li拿出来后，一个一个绑定点击事件（因为 click 函数有隐式迭代）
        // $('ul > li').click(function () {
        //   console.log($(this).index())
        // })
      })
    </script>
  </body>
</html>
